<script setup lang="ts">
import { ref } from "vue";

const dataList = ref([
  {
    activityName: "绘向美院9周年庆—30元入场券抢占价值1980元八重豪礼+最高8节课！",
    firstTime: "2025-08-20 12:12",
    lastTime: "2025-08-20 12:12",
    viewCount: "1",
    viewTimeTotal: "30秒",
  },
  {
    activityName: "绘向美院9周年庆—30元入场券抢占价值1980元八重豪礼+最高8节课！",
    firstTime: "2025-08-20 12:12",
    lastTime: "2025-08-20 12:12",
    viewCount: "1",
    viewTimeTotal: "1分30秒",
  },
  {
    activityName: "绘向美院9周年庆—30元入场券抢占价值1980元八重豪礼+最高8节课！",
    firstTime: "2025-08-20 12:12",
    lastTime: "2025-08-20 12:12",
    viewCount: "1",
    viewTimeTotal: "30秒",
  },
]);

const modalVisible = ref(false);
</script>

<template>
  <umi-container bg-color="#f2f2f2" min-height="100%" padding="16px" :gap="16">
    <umi-breadcrumb :items="['客户管理', '客户列表', '客户详情']"></umi-breadcrumb>
    <umi-card :bordered="false">
      <umi-container :gap="16">
        <umi-space :size="10">
          <umi-button type="primary" @click="modalVisible = true">修改</umi-button>
          <umi-button type="primary" @click="$router.push({ name: 'CustomerList' })">返回</umi-button>
        </umi-space>
        <umi-descriptions>
          <umi-descriptions-item label="客户编号">
            <umi-space :size="4" align="center">
              <umrp-text :size="16">202509010001</umrp-text>
              <umi-icon name="copy"></umi-icon>
            </umi-space>
          </umi-descriptions-item>
          <umi-descriptions-item label="微信昵称"> Catlin </umi-descriptions-item>
          <umi-descriptions-item label="真实姓名"> 黄小玲 </umi-descriptions-item>
          <umi-descriptions-item label="手机号码"> 13512345678 </umi-descriptions-item>
          <umi-descriptions-item label="客户类型">
            <umi-tag>新客</umi-tag>
          </umi-descriptions-item>
          <umi-descriptions-item label="交易金额"> 1999元 </umi-descriptions-item>
          <umi-descriptions-item label="交易笔数"> 10</umi-descriptions-item>
          <umi-descriptions-item label="最新下单">黄宝宝（13512345678）</umi-descriptions-item>
          <umi-descriptions-item label="下单时间">2022-01-01 00:00</umi-descriptions-item>
          <umi-descriptions-item label="加入时间">2022-01-01 00:00</umi-descriptions-item>
        </umi-descriptions>
      </umi-container>
    </umi-card>
    <umi-card :bordered="false">
      <umi-container :gap="16">
        <umi-text :size="16" bold>TA的行为</umi-text>
        <umi-table :data="dataList" :pagination="false">
          <template #columns>
            <umi-table-column title="序号" data-index="id" :width="80"></umi-table-column>
            <umi-table-column title="活动名称" data-index="activityName"></umi-table-column>
            <umi-table-column title="首次进入时间" data-index="firstTime" :width="180"></umi-table-column>
            <umi-table-column title="最新进入时间" data-index="lastTime" :width="180"></umi-table-column>
            <umi-table-column title="浏览次数" data-index="viewCount" :width="120"></umi-table-column>
            <umi-table-column title="累计浏览时长" data-index="viewTimeTotal" :width="130"></umi-table-column>
          </template>
        </umi-table>
      </umi-container>
    </umi-card>
    <umi-modal v-model:visible="modalVisible" :width="500" title="客户信息">
      <umi-form>
        <umi-form-item label="真实姓名" required>
          <umi-input></umi-input>
        </umi-form-item>
        <umi-form-item label="手机号码" required>
          <umi-input></umi-input>
        </umi-form-item>
        <umi-form-item label="客户类型" required>
          <umi-select>
            <umi-option value="1">新客</umi-option>
            <umi-option value="2">老客</umi-option>
          </umi-select>
        </umi-form-item>
      </umi-form>
    </umi-modal>
  </umi-container>
</template>
